import React from 'react';
import { Link, animateScroll as scroll } from 'react-scroll';
import { StyledBoldTextMenu } from './BoldTextMenu.styled';
import { StyledMediumText } from './MediumText.styled';
import styles from './SettingsMenu.module.scss';

const menuArray: Array<Array<string>> = [
    [ 'Профиль', 'profileCard' ],
    [ 'Безопасность', 'securityCard' ],
    [ 'Подсоединенные устройства', 'sessionsCard' ],
];

const SettingsMenu: React.FC = (): React.ReactElement => (
    <div className={styles.container}>
        <StyledBoldTextMenu>Настройки</StyledBoldTextMenu>
        {menuArray.map((el) => (
            <Link
                key={el[1]}
                to={el[1]}
                spy
                smooth
                duration={500}
                className={styles.menuItem}
                activeClass={styles.active}
                offset={-65}
            >
                <StyledMediumText>{el[0]}</StyledMediumText>
            </Link>
        ))}
    </div>
);

export default SettingsMenu;
